<template>
  <view class="Global">


    <bgImage></bgImage>

    <MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


    <view class="content">

      <view class="contentItem" v-for="(item,index) in listData" @click="clickItem(item,index)">
        <text v-if="item.select==false" class="contentItemImgUnSelect"></text>
        <image v-if="item.select==true" class="contentItemImg" src="/static/xuanzhong.png" mode="scaleToFill"></image>
        <text class="contentItemText">{{ item.workName }}</text>
      </view>


    </view>


    <text class="ContentButton" @click="daySettingSave">确定</text>


  </view>
</template>

<script>
import MyNav from '@/components/customnavbar.vue'

import bgImage from '@/components/backgroundImage.vue'
import {daySettingSave} from "@/pages/api/api.js";


export default {
  components: {
    MyNav,
    bgImage,

  },
  data() {
    return {
      title: '工作日设置',
      isback: true,
      dayList: [],
      dataEntity: {},
      listData: [
        {
          workName: '周一',
          select: false,
          workSort: 1
        },
        {
          workName: '周二',
          select: false,
          workSort: 2
        },
        {
          workName: '周三',
          select: false,
          workSort: 3
        },
        {
          workName: '周四',
          select: false,
          workSort: 4
        },
        {
          workName: '周五',
          select: false,
          workSort: 5
        },
        {
          workName: '周六',
          select: false,
          workSort: 6
        },
        {
          workName: '周日',
          select: false,
          workSort: 7
        }

      ]

    }
  },
  onLoad: function (option) {
    console.info("option",option)
    console.info("option_json",JSON.parse(decodeURIComponent(option.param)))
    let data = JSON.parse(decodeURIComponent(option.param));
    this.dayList = data.days;
    this.dataEntity = data.data;
    this.listData.forEach(item => {
      this.dayList.forEach(row => {
        if (item.workName == row.workName) {
          item.select = true;
        }
      })
    })
  },
  methods: {
    clickItem(item, index) {
      this.listData.forEach((item, itemIndex) => {
        if (index == itemIndex) {
          item.select = !item.select
        }
      })
    },
    backOnClick() {
      uni.navigateBack({
        delta: 1
      });
      console.log('点击返回');
    },
    daySettingSave() {
      let list = []
      this.listData.forEach(item=>{
        if(item.select){
          list.push(item)
        }
      })
      let data = {
        ...this.dataEntity,
        workdaySettingList: list
      }
      daySettingSave(data).then(res=>{
        if(res.code==200){
          // 显示提示信息
          uni.showToast({
            title: '保存成功！',
            icon: 'none'
          });
          uni.navigateTo({
            url: '/subPack/clockIn/commutingSettings/commutingSettings?workTime='+encodeURIComponent(JSON.stringify(this.dataEntity)),
          });
        }else {
          // 显示提示信息
          uni.showToast({
            title: res.msg,
            icon: 'error'
          });
        }
      })
    }
  }
}
</script>

<style>

	.ContentButton{
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;

		position: absolute;

		bottom: 30rpx;

		display: flex;
		align-items: center;
		justify-content: center;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;

	}
	.contentItemImgUnSelect {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		background: #FFFFFF;
		border-radius: 50%;
		border: 2rpx solid #999999;

		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.contentItemText {
		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;
	}

	.contentItemImg {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.contentItem {
		display: flex;
		align-items: center;

		height: 120rpx;
		width: 100%;

		border-bottom: #EEEEFF solid 1rpx;
	}

	.content {

		margin-top: 30rpx;
		width: 690rpx;
		height: 841rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
</style>
